<template>
    <div class="card-box">
        <slot></slot>
        <div v-if="!$slots['default']" class="flex-box-top-bottom">
            <slot name="title"></slot>
            <span v-if="!$slots['title']" class="flex-box-title">{{ title }}</span>
            <slot name="content"></slot>
            <div v-if="!$slots['content']" class="flex-box-left-right">
                <div class="flex-box-content-left">
                    <slot name="left"></slot>
                </div>
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface Props {
    title?: string
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
.card-box {
    width: 100%;
    transition: all 0.3s;
    background-color: var(--el-bg-color-overlay);
    border: none;
    border-radius: 4px;
    padding: 20px;
    box-shadow: var(--el-box-shadow-lighter);

    &:hover {
        transform: scale(1.03);
        box-shadow: var(--el-box-shadow);
    }
}
.flex-box-top-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.flex-box-left-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-box-title {
    font-size: 20px;
    color: gray;
}
.flex-box-content-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
}
</style>
